<!--  -->
<template>
  <div class="login-container">
    <login-unit
      v-if="currtPage === 'login'"
      @changeState="changeState"/>
    <register
      v-if="currtPage === 'register'"
      @changeState="changeState"
    />
    <forgot-pwd
      v-if="currtPage === 'forgot'"
      @changeState="changeState"
    />
    <p>备案号：<a href="https://beian.miit.gov.cn">闽ICP备2022000731号</a></p>
  </div>
</template>

<script>
import loginUnit from '@/components/login'
import register from '@/components/register'
import forgotPwd from '@/components/forgotPwd'
import { APP_CONFIG } from '@/config'
import Cookies from 'js-cookie'

export default {
  name: 'LoginIndex',
  components: {
    register,
    forgotPwd,
    loginUnit
  },
  data () {
    return {
      currtPage: 'login',
      url: APP_CONFIG.STATIC_HOST + '/api/v2/cookie'
    }
  },
  created () {
    this.getJson()
  },
  mounted () {
    window.jsonpCallback = data => {
      Cookies.set('SESSION', data.session, { expires: 30 })
    }
  },
  methods: {
    getJson () {
      const timestamp = new Date().getTime()
      this.$jsonp(
        this.url,
        {
          // callbackQuery: "callbackParam1",
          // callbackName: "jsonpCallback1",
          vm: timestamp
        },
        err => {
          console.log(err)
        }
      )
      // }).then((json) => {
      //   // 返回的jsonp数据不会放这里，而是在 window.jsonpCallback
      //   console.log(json);
      // });
    },
    changeState (index) {
      this.currtPage = index
    }
  }
}
</script>

<style lang='less' scoped>
.login-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url('../../assets/login_bg.jpg') no-repeat;
  background-size: cover;
}
p {
  line-height: 30px;
  font-size: 14px;
  color: #666;
  a {
    text-decoration: none;
    color: #666;
  }
}
</style>
